<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-07-03 11:10:08
 * @FilePath: /src/components/Chart/LineBarChart.vue
 * @LastEditTime: 2021-07-03 14:18:57
 * @LastEditors: luojiajun
-->
<template>
    <div ref="lineBarChart" :class="echartClass" />
</template>

<script>
import { objectMerge } from "@/utils";
import resize from "./mixins/resize";
import echarts from "echarts";
require("echarts/theme/macarons");

export default {
    name: "LineBarChart",
    mixins: [resize],
    props: {
        echartClass: {
            type: String,
            default: "echartbox-default"
        },
        chartSetting: {
            type: Object,
            default: () => ({})
        },
        chartData: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            chartSetDefault: {
                grid: {
                    top: "15%",
                    bottom: "15%",
                    left: "0",
                    right: "1%",
                    containLabel: true
                },
                legend: {
                    data: []
                },
                xAxis: {
                    type: "category",
                    data: [],
                    interval: 0,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#000",
                            fontSize: 8
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#000"
                        }
                    }
                },
                yAxis: {
                    type: "value",
                    min: "0",
                    max: null,
                    splitNumber: 5,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#000",
                            fontSize: 8
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#000"
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#000"
                        }
                    }
                },
                tooltip: {
                    show: true
                },
                barColor: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                        offset: 0,
                        color: "rgba(26, 30, 48, 0)"
                    },
                    {
                        offset: 0.5,
                        color: "rgba(231, 21, 64, 0.5)"
                    },
                    {
                        offset: 1,
                        color: "rgba(231, 21, 64, 1)"
                    }
                ])
            },
            chartDataDefault: {
                bar: [],
                line: []
            },
            chart: null
        };
    },
    computed: {
        mergedChartSet() {
            return objectMerge(this.chartSetDefault, this.chartSetting);
        },
        mergedChartData() {
            return objectMerge(this.chartDataDefault, this.chartData);
        }
    },
    watch: {
        mergedChartSet: {
            handler: function() {
                this.drawChart();
            },
            deep: true
        },
        mergedChartData: {
            handler: function() {
                this.drawChart();
            },
            deep: true
        }
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        drawChart() {
            let myChart = echarts.init(this.$refs.lineBarChart, "macarons");

            let series = [];
            for (const key in this.mergedChartData) {
                if (Object.hasOwnProperty.call(this.mergedChartData, key)) {
                    const list = this.mergedChartData[key];
                    for (let i = 0; i < list.length; i++) {
                        const item = list[i];
                        if (key === "bar") {
                            series.push({
                                name: item.name,
                                type: "bar",
                                data: item.data,
                                stack: true,
                                label: {
                                    normal: {
                                        show: false
                                    }
                                }
                            });
                        } else {
                            series.push({
                                name: item.name,
                                type: "line",
                                symbol: "circle",
                                symbolSize: "7",
                                data: item.data,
                                lineStyle: {
                                    width: 1.5
                                }
                            });
                        }
                    }
                }
            }

            myChart.option = {
                grid: this.mergedChartSet.grid,
                legend: {
                    data: this.mergedChartSet.legend.data
                },
                xAxis: {
                    type: this.mergedChartSet.xAxis.type,
                    data: this.mergedChartSet.xAxis.data,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: this.mergedChartSet.xAxis.axisLine.lineStyle
                                .color
                        }
                    },
                    axisTick: {
                        show: true
                        // boundaryGap: true,
                        // alignWithLabel: false
                    },
                    axisLabel: {
                        interval: this.mergedChartSet.xAxis.axisLabel.interval,
                        show: this.mergedChartSet.xAxis.axisLabel.show
                    }
                },
                yAxis: {
                    type: this.mergedChartSet.yAxis.type,
                    splitNumber: this.mergedChartSet.yAxis.splitNumber,
                    max: this.mergedChartSet.yAxis.max,
                    min: this.mergedChartSet.yAxis.min,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: this.mergedChartSet.yAxis.axisLine.lineStyle
                                .color
                        }
                    },
                    axisTick: {
                        show: true
                        // boundaryGap: true,
                        // alignWithLabel: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: this.mergedChartSet.yAxis.axisLabel.textStyle
                                .color
                            // fontSize: this.mergedChartSet.yAxis.axisLabel
                            //     .textStyle.fontSize
                        },
                        show: this.mergedChartSet.yAxis.axisLabel.show
                    },
                    splitLine: {
                        lineStyle: {
                            type: "dotted",
                            color: this.mergedChartSet.yAxis.splitLine.lineStyle
                                .color
                        }
                    }
                },
                tooltip: {
                    trigger: "axis",
                    show: this.mergedChartSet.tooltip.show,
                    axisPointer: {
                        type: "shadow"
                    }
                },
                dataZoom: [
                    {
                        id: "dataZoomX",
                        type: "slider",
                        xAxisIndex: [0],
                        filterMode: "empty"
                    }
                ],
                series
            };

            myChart.clear();
            myChart.setOption(myChart.option, true);

            this.chart = myChart;
        },
        resize() {
            this.$nextTick(() => {
                this.chart.resize();
            });
        }
    },
    beforeDestroy() {
        if (!this.chart) {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    }
};
</script>

<style lang="scss" scoped>
.echartbox-default {
    width: 100%;
    height: 100%;
}
</style>
